<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/static/web/jsp/include.jsp"%>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的-我的订单</title>
    <meta name="description" content="网站描述" />
    <meta name="keywords" content="关键词" />
    <link rel="stylesheet" href="${path}/static/web/style/style.css">
    <link rel="stylesheet" href="${path}/static/web/style/hizoom.css">
    <link rel="stylesheet" href="${path}/static/web/style/page_nav.css">
    <link rel="stylesheet" href="${path}/static/web/style/art.css">
    <style type="text/css">
        .order_tip{
            font-size: 14px;
            color: #f84f4c;
        }
    </style>
</head>
<body>
    <!-- 导航 -->
    <%@ include file="/static/web/jsp/top.jsp"%>

    <!-- 详情内容 -->
    <div class="model_container">
        <div class="link_sprite">当前位置：<a href="">首页</a> &#155; <a href="">个人中心</a> &#155; <a href="">我的订单</a></div>

        <div class="model_container clearfix">
            <!-- 我的中心导航 -->
            <%@ include file="/static/web/jsp/mine_nav.jsp"%>

            <!-- 右侧内容区 -->
            <div class="mine_aside" id="orderController" v-cloak>

                <div class="block_box">
                    <div class="order_tab_box">
                        <a class="order_tab" :class="{'on':state==0}" href="javascript:void(0);" @click="setState(0)"><span>全部</span></a>
                        <a class="order_tab" :class="{'on':state==1}" href="javascript:void(0);" @click="setState(1)"><span>待付款</span></a>
                        <a class="order_tab" :class="{'on':state==3}" href="javascript:void(0);" @click="setState(3)"><span>待收货</span></a>
                        <a class="order_tab" :class="{'on':state==4}" href="javascript:void(0);" @click="setState(4)"><span>已完成</span></a>
                    </div>
                </div>
                <p class="order_tip" v-if="state==0 || state==1">
                    提示：如果因为限额不能进行支付，请联系客服021-50206639
                </p>
                <div class="block_box box_shadow" v-infinite-scroll="loadOrders" infinite-scroll-disabled="busy" infinite-scroll-distance="0">
                    <div class="no_data" v-show="list.length == 0">
                        <img src="${path}/static/web/images/no_data.png"/>
                        <p>暂无数据哦，去看看其他的吧</p>
                    </div>
                    <div v-show="list.length > 0" class="order_item" v-for="order in list" >
                        <div class="order_topic" @click="jump(order)">
                            <span class="number">订单号：{{order.orderCode}}</span>
                            <span class="time">{{order.time}}</span>
                            <span class="fr red" v-if="order.orderType==1">待付款</span>
                            <span class="fr red" v-if="order.orderType==3">待收货</span>
                            <span class="fr red" v-if="order.orderType>3">已完成</span>
                        </div>
                        
                        <div class="order_content">
                            <div class="ordering" @click="jump(order)">
                                <div class="order_info">
                                    <div class="order_pic fl"><img src="${path}/static/web/images/pro.jpg" v-sy-img="order.goodsImg"/></div>
                                    <div class="order_desc">
                                        <h3 class="order_title">{{order.goodsName}}</h3>
                                        <div class="order_other">
                                            <span>x 1</span>
                                            <%--<span class="price">￥{{order.totalPrice}}</span>--%>
                                            <span class="order_label" >{{order.isPacking}}</span>
                                            <%--<span class="order_label" v-if="order.isPacking == 1">有框</span>--%>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <%--<div class="ordering">--%>
                                <%--<div class="order_info">--%>
                                    <%--<div class="order_pic fl"><img src="${path}/static/web/images/border.jpg"/></div>--%>
                                    <%--<div class="order_desc">--%>
                                        <%--<h3 class="order_title">黑色裱框</h3>--%>
                                        <%--<div class="order_other">--%>
                                            <%--<span>x 1</span>--%>
                                            <%--<span class="price">￥300.00</span>--%>
                                        <%--</div>--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                            <%--</div>--%>
                        </div>

                        <div class="order_bottom">
                            <div class="fl order_cost">
                                <p>成交价：￥{{order.pawnPrice}}</p>
                                <p>最终服务费：￥{{order.serviceMoney}}</p>
                                <p>其他费用：￥{{order.otherPrice}}</p>
                                <p class="red">合计：￥{{order.totalPrice}}</p>
                            </div>
                            <%--共1件，合计：<span class="red">￥{{order.totalPrice}}</span>--%>
                            <div class="order_btns" v-show="order.orderType==1">
                                <a href="javascript:void(0);" class="btn btn_default_gray" @click="cancelOrder(order)">取消订单</a>
                                <a href="javascript:void(0);" class="btn btn_default_orange" @click="showPay(order)">去付款</a>
                            </div>
                            <div class="order_btns" v-show="order.orderType==3">
                                <a href="#" class="btn btn_default_gray" @click="express(order)">查看物流</a>
                                <a href="javascript:void(0);" class="btn btn_default_blue" @click="setOrderConfirm(true,order)">确认收货</a>
                            </div>
                            <div class="order_btns" v-show="order.orderType>3">
                                <a href="#" class="btn btn_default_gray" @click="express(order)">查看物流</a>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <!-- 选择支付方式 -->
    <div class="art_model payfor_model" id="payTypeController" :style="{'display':showPayType?'block':'none'}">
        <div class="model_wrap">
            <div class="model_header">
                <div class="head_title">选择支付方式</div>
                <a class="icon icon_close head_close" href="javascript:void(0);" @click="setType(false)"></a>
            </div>
            <div class="art_model_content pay_ways">
                <div class="pay_way" data-way="0" :class="{'on':payType == 1}" @click="selectPayType(1)">
                    <i class="icon icon_zfb"  ></i><span>支付宝</span><i class="fr icon icon_radio"></i>
                </div>
                <div class="pay_way" data-way="1" :class="{'on':payType == 2}" @click="selectPayType(2)">
                    <i class="icon icon_wx"  ></i><span>微信</span><i class="fr icon icon_radio"></i>
                </div>
                <%--<div class="pay_way" data-way="2">--%>
                    <%--<i class="icon icon_bank"></i><span>银行卡</span><i class="fr icon icon_radio"></i>--%>
                <%--</div>--%>
            </div>
            <div class="model_btn mt_20" @click="toPay">
                <a href="javascript:void(0);" class="btn btn_primary btn_pay_way">确 定</a>
            </div>
        </div>
    </div>

    <div class="art_model confirm_model" id="confirmController" :style="{'display':orderConfirm?'block':'none'}">
        <div class="model_wrap">
            <div class="model_header">
                <div class="head_title">确认收货</div>
            </div>
            <div class="art_model_content">
                <p class="model_tip">确认收到货品了吗？</p>
            </div>
            <div class="btns_box mt_20">
                <a href="javascript:void(0);" class="btn btn_disabled model_close" @click="setOrderConfirm(false)">取消</a>
                <a href="javascript:void(0);" class="btn btn_primary" @click="confirmOrder">确认</a>
            </div>
        </div>
    </div>


    <!-- 客服 -->
    <%@ include file="/static/web/jsp/footer.jsp"%>

    <form id="form" action="${path}/web/pay/onlinePay" method="post">
        <input type="hidden" name="content" id="content"/>
    </form>
</body>
<%--<script src="${path}/static/web/js/jquery.min.js"></script>--%>
<script src="${path}/static/web/js/art.js"></script>
<script src="${path}/static/web/js/biz/mine_order.js"></script>

</html>